<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchList">
          <a-row :gutter="48">
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="搭配师/导购手机号">
                <a-input v-model="queryParam.phone" placeholder="请输入" allowClear />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="搭配师/导购名称">
                <a-input v-model="queryParam.name" placeholder="请输入" allowClear />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="状态">
                <a-select v-model="queryParam.status" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option :value="0">禁用</a-select-option>
                  <a-select-option :value="1">启用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="搭配师/导购">
                <a-select v-model="queryParam.isSales" placeholder="请选择" @change="handleChangeType">
                  <a-select-option :value="0">搭配师</a-select-option>
                  <a-select-option :value="1">导购</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24" v-if="queryParam.isSales == 0">
              <a-form-item label="小程序展示">
                <a-select v-model="queryParam.ifUseMiniapp" placeholder="请选择">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="1">是</a-select-option>
                  <a-select-option :value="0">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="queryParam.isSales == 0 ? 18 : 24" :xl="queryParam.isSales == 0 ? 8 : 16" :lg="queryParam.isSales == 0 ? 12 : 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="searchList">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
                <a-button type="primary" style="margin-left: 8px" icon="plus" @click="handleAdd">新建</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false" :style="{ marginTop: '24px' }">
      <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 6 }" :data-source="fashionerList" :pagination="paginationProps">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card hoverable class="fas-card">
            <template slot="cover">
              <div class="photo">
                <img alt="example" :src="item.photo" />
                <div>
                  <p>
                    <span>{{ item.name }}</span>
                    <span>{{ item.score }}</span>
                  </p>
                  <!-- <p>
                    <ellipsis :length="28" tooltip slot="total">{{ item.memo }}</ellipsis>
                  </p>
                  <p>
                    <router-link to="/box/customer/customerList/index" style="color:#fff;text-decoration: underline;">顾客人数：{{ item.name }}</router-link>
                    <router-link :to="`/box/serviceOrder/list/${item.isSales == 1 ? 'sales' : 'fashioner'}`" style="color:#fff;text-decoration: underline;">服务次数：{{ item.score }}</router-link>
                  </p> -->
                </div>
              </div>
            </template>
            <template slot="actions" class="ant-card-actions">
              <a-switch default-checked @change="e => handleChange(e, item)" :checked="item.status == 1" size="small" />
              <!-- <a-icon key="setting" type="setting" /> -->
              <router-link :to="`/box/fashioner-setting/detail/${item.id}`">
                <a-icon key="edit" type="edit" theme="twoTone" two-tone-color="#52c41a" :style="{ fontSize: '20px' }" />
              </router-link>
              <a-icon key="wechat" type="wechat" :style="{ fontSize: '20px', color: item.ifUseMiniapp == 1 ? '#2ba244' : 'rgba(0, 0, 0, 0.45)', cursor: 'default' }" />
            </template>

            <p>
              <ellipsis :length="28" tooltip slot="total">{{ item.memo }}</ellipsis>
              <!-- <span>本月计划服务数：</span>
              <span>本月实际服务数：</span> -->
            </p>
          </a-card>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>
<script>
import { Ellipsis } from '@/views/box/components'
import { fashionerList, fashionerCreate } from '@/api/box/setting'
export default {
  components: {
    Ellipsis
  },
  data() {
    return {
      queryParam: {
        status: '',
        isSales: 0,
        ifUseMiniapp: ''
      },
      fashionerList: [],
      paginationProps: {
        current: 1,
        pageSize: 12,
        total: 0,
        showTotal: total => `共有 ${total} 条数据`,
        onChange: page => {
          this.fetchList(page)
        }
      }
    }
  },
  watch: {
    $route(to, from) {
      let currentName = 'box-fashioner-setting-list'
      let detailName = 'box-fashioner-setting-detail'
      if (to.name.includes(currentName) && from.name.includes(detailName)) {
        this.fetchList(this.paginationProps.current)
      }
      if (from.name.includes(currentName) && !to.name.includes(detailName)) {
        this.$destroy()
      }
    }
  },
  created() {
    this.fetchList(1)
  },
  methods: {
    fetchList(pageNo) {
      this.paginationProps.current = pageNo
      let params = {
        requestData: this.filterFields(this.queryParam),
        page: {
          pageSize: 12,
          pageNo: pageNo
        }
      }
      fashionerList(params).then(res => {
        if (res.code == 0) {
          this.fashionerList = res.data
          this.paginationProps.total = res.page.count
        } else {
          this.$message.warning(res.msg)
          this.data = []
          this.paginationProps.total = 0
        }
      })
    },
    searchList() {
      this.fetchList(1)
    },
    resetList() {
      this.queryParam = {
        status: '',
        isSales: 0,
        ifUseMiniapp: ''
      }
      this.searchList()
    },
    onChange(checked, item) {
      console.log(`a-switch to ${checked}`)
    },
    handleChangeType(value) {
      this.queryParam.isSales = value
    },
    filterFields(param) {
      let formValue = {}
      Object.keys(param).forEach(key => {
        if (param[key] !== '' && param[key] !== undefined && param[key] !== null) {
          formValue[key] = param[key]
        }
      })
      return formValue
    },
    handleChange(e, item) {
      console.log(e, item)
      let params = {
        requestData: {
          id: item.id,
          status: e ? 1 : 0
        }
      }
      fashionerCreate(params).then(res => {
        if (res.code == 0) {
          this.$message.success('修改成功！')
          item.status = e
          this.fetchList(this.paginationProps.current)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleAdd() {
      this.$router.push('/box/fashioner-setting/detail/add')
    }
  }
}
</script>
<style lang="less" scoped>
.fas-card {
  /deep/ .ant-card-body {
    padding: 16px;
  }
  p {
    width: 100%;
    line-height: 28px;
    height: 28px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
  }
  .photo {
    position: relative;
    img {
      object-fit: cover;
      height: 250px;
      width: 100%;
      display: block;
      cursor: default;
    }
    div {
      position: absolute;
      bottom: 0;
      z-index: 2;
      width: 100%;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      padding: 12px 16px;
      box-sizing: border-box;
    }
  }
}
</style>

